<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<link rel="Shortcut Icon" href="../images/logo/logo.png" />
    <title>图书管理系统	</title>
    <link  href="../statics/css/screen.css"
      media="screen, projection"
      rel="stylesheet"
      type="text/css" /> 
	<link rel="stylesheet" type="text/css" href="../statics/css/verify.css">
    <link rel="stylesheet" href="../statics/css/iconfont.css" />
    <script src="../statics/js2/jquery-3.2.1.min.js"></script>
    <script src="../statics/css/semantic.js"></script>
	<script src="../statics/js2/verify.js"></script>
	<script src="../statics/js2/crypto-js.js"></script>
	<script src="../statics/js2/ase.js"></script>
  </head> 
 
  <body> 
    <div> 
      <div class="container"  id="content">
        <artical class="form">
          <ul class="list">
            <div class="title">
              <div class="register">
                <i class="iconfont icon-xingming"></i> <span>注册</span>
              </div>
              <div class="login"><span>已有账号</span> <a href="../index.html" class="txt1">登陆</a></div>
            </div>
            <li class="liparent">
              <div class="title">邮箱</div>
              <div class="minput">
                <i class="iconfont icon-youxiang"></i>
                <input id="Email"
                  class="inner_input"
                  type="text"
                  onkeyup="showError()"
            	  onblur="showError()"
                  placeholder="邮箱" />
              </div>
              <span id="s_email" class="span_error" ></span>
            </li>
            <li class="liparent">
              <div class="title">手机号码</div>
              <div class="minput">
                <i class="iconfont icon-shouji"></i>
                <input id="Telphone" class="inner_input" type="text" placeholder="手机号码" onblur="showPhoneError()" onkeyup="showPhoneError()"/>
              </div>
              <span id="s_telphone" class="span_error" ></span>
            </li>
            <li class="liparent">
              <div class="title">账号</div>
              <div class="minput">
                <i class="iconfont icon-xingming"></i>
                <input id="username" class="inner_input" type="text" placeholder="账号" 
            	onkeyup="showUserError()" onblur="showUserError()" />
              </div>
              <span id="s_username" class="span_error" ></span>
            </li>
			<li class="liparent">
			  <div class="title">昵称</div>
			  <div class="minput">
			    <i class="iconfont icon-baohu"></i>
			    <input id="nickname" class="inner_input" type="text" placeholder="昵称" />
			  </div>
			</li>
			<li class="liparent">
			  <div class="title">出生日期</div>
			  <div class="minput">
			    <i class="iconfont icon-fangzi"></i>
			    <input type='date' class="inner_input" id='birth'  placeholder="出生日期" style="font: inherit;font-size: 0.7rem;color: #666666;"/>
			  </div>
			  
			  
			  <span id="s_birth" class="span_error" ></span>
			</li>
            <li class="liparent">
              <div class="title">密码</div>
              <div class="minput">
                <i class="iconfont icon-suo"></i>
                <input
            		id="password1"
                  class="inner_input hidepassword1"
                  type="password"
                  placeholder="密码" onkeyup="showPasswordError1()" onblur="showPasswordError1()"/>
                <i class="iconfont icon-yanjing"
                  onclick="showPassWordInput('hidepassword1')"></i>
              </div>
              <span id="s_password1" class="span_error" ></span>
            </li>
            <li class="liparent">
              <div class="title">密码</div>
              <div class="minput">
                <i class="iconfont icon-suo"></i>
                <input id="password2"
                  class="inner_input hidepassword2"
                  type="password"
                  placeholder="再次输入密码"  onkeyup="showPasswordError2()" onblur="showPasswordError2()"
                />
                <i
                  class="iconfont icon-yanjing"
                  onclick="showPassWordInput('hidepassword2')"
                ></i>
              </div>
              <span id="s_password2" class="span_error" ></span>
            </li>
            <li class="liparent">
			 <div class="minput">
				 <button class="minput mbtn_regist" type="button" id="register_btn" onclick="clickRegister()">注册</button>
				 <div id="mpanel4" style="margin-top:50px;"> </div>
			 </div>
              
            </li>
            <li class="liparent">
              <div class="title"></div>
              <div class="minput prompt">
              </div>
            </li>
            <li class="login_theother">
              <p class="title">
                <span class="leftline"></span>
                <span class="rightline"></span>
              </p>
              <div class="icongroup">
              </div>
            </li>
          </ul>
          <ul class="aside">
            <li class="title">尝试码云企业版？</li>
            <li>
              <i class="iconfont icon-dui"></i>
              <span>不止更多成员、更高配额</span>
            </li>
            <li>
              <i class="iconfont icon-dui"></i>
              <span>
                灵活支撑协作研发、代码交付、IT 教育培训等场景代码托管需求
              </span>
            </li>
            <li class="title"><span>他们都在用</span></li>
            <li>
              <p>
                已有超过 50000 企业研发团队选择码云企业版，60%
                客户来自口碑推荐。
              </p> </li>  </ul>
        </artical>
      </div>
	  <div id="mpanel4" style="margin-top:50px;">
	  </div>
      <footer>
        <div class="mfooter"> </div>
        <div class="pfooter"> <div class="container_footer"> </div> </footer> </div>
  </body>
</html>

<script>

	function clickRegister(){
		if(showUserError()){
		//if(showError() && showPhoneError() &&showPasswordError1() && showPasswordError2() && showUserError()){
            //var URL = 'http://localhost:8088';
            var URL = 'http://39.107.205.22:8088';
			alert("请确认输入准确无误后提交注册！")
		    $('#mpanel4').pointsVerify({
				
				baseUrl:URL,  //服务器请求地址,  
				containerId:'register_btn', // pop模式 必填 被点击之后出现行为验证码的元素id
				mode:'pop',
				imgSize : {       //图片的大小对象
			       	width: '400px',
			       	height: '200px',
				},
			    ready : function() {
			    },
			    success : function(params) {
					console.log("success")
				//返回的二次验证参数 合并到验证通过之后的逻辑 参数中回传服务器
			    // params为返回的二次验证参数 需要在接下来的实现逻辑回传服务器
			    // 例如: login($.extend({}, params))
					var name =  document.getElementById("username").value
			        var pass = document.getElementById("password1").value
			        var phone =  document.getElementById("Telphone").value
                    var email =  document.getElementById("Email").value
			        var birth = document.getElementById("birth").value
			        var nickname = document.getElementById("nickname").value
					
			  
			        $.ajax({
			            url: URL + "/user/register",
			            type:"post",
			            data:{"username":name,"password":pass,"email":email,"phone":phone,"role":0,"birth":birth,"nickname":nickname},
			            dataType:"json",
			            success:function(result){
							setTimeout("javascript:location.href='../index.html'", 1000);
			            },
			        })
			    },
			    error : function() {
					console.log("error")
			    }
			});  
		}
	}
  /**
   * @description 移动端按钮切换
   */
  function toggleClass(e) {
    $($(e.currentTarget).siblings()[0]).toggleClass('active')
    $(e.currentTarget).toggleClass('active')
  }
  /**
   * @description 隐藏校验信息
   */
  ;(function hideitems() {
    $('.error').hide()
    $('.showpassword').hide()
  })()
  /**
   * @description 正则校验标准
   */
  var isEmail = value => {
    return /^[A-Za-z0-9-._]+@[A-Za-z0-9-]+(.[A-Za-z0-9]+)*(.[A-Za-z]{2,6})$/.test(
      value
    )
  }
  var isPhone = value => {
    return /^[1][3,4,5,7,8][0-9]{9}$/.test(value)
  }

  /**
   * 邮箱校验
   */
  function showError()  {
	//4.提示信息
	var s_email  = document.getElementById("s_email");  
	var email = document.getElementById("Email").value
    if (!email) {
	  s_email.setAttribute("style","display:block");
      s_email.innerHTML = "<p class='font_error'>邮箱不能为空</p>";
	  return false;
    } else if (!isEmail(email)) {
	  s_email.setAttribute("style","display:block");
      s_email.innerHTML = "<p class='font_error'>邮箱的格式不正确</p>";
	  return false;
    } 
	s_email.setAttribute("style","display:none"); 
	return true;
  }
  
  /**
   * 手机号码校验
   */
  function showPhoneError()  {
  	//4.提示信息
  	var s_telphone  = document.getElementById("s_telphone");  
  	var phone = document.getElementById("Telphone").value
    if (!phone) {
  	  s_telphone.setAttribute("style","display:block");
      s_telphone.innerHTML = "<p class='font_error'>手机号不能为空</p>";
  	  return false;
    } else if (!isPhone(phone)) {
  	  s_telphone.setAttribute("style","display:block");
      s_telphone.innerHTML = "<p class='font_error'>手机号码的格式不正确</p>";
  	  return false;
    } 
	s_telphone.setAttribute("style","display:none"); 
  	return true;
  }
  
  
  /**
   * 密码校验
   */
  function showPasswordError1()  {
  	//4.提示信息
  	var s_password1  = document.getElementById("s_password1");  
  	var password1 = document.getElementById("password1").value
    if (!password1) {
  	  s_password1.setAttribute("style","display:block");
      s_password1.innerHTML = "<p class='font_error'>密码不能为空</p>";
  	  return false;
    } else if (password1.length<6) {
  	  s_password1.setAttribute("style","display:block");
      s_password1.innerHTML = "<p class='font_error'>密码的长度至少6个字符</p>";
  	  return false;
    } else if (password1.length>16) {
  	  s_password1.setAttribute("style","display:block");
      s_password1.innerHTML = "<p class='font_error'>密码的长度超过最大限制</p>";
  	  return false;
    } 
	s_password1.setAttribute("style","display:none"); 
  	return true;
  }  
  
  
  function showPasswordError2()  {
  	//4.提示信息
  	var s_password2  = document.getElementById("s_password2");  
  	var password2 = document.getElementById("password2").value
	var password1 = document.getElementById("password1").value
    if (!password2) {
  	  s_password2.setAttribute("style","display:block");
      s_password2.innerHTML = "<p class='font_error'>密码不能为空</p>";
  	  return false;
    } else if (password2.length<6) {
  	  s_password2.setAttribute("style","display:block");
      s_password2.innerHTML = "<p class='font_error'>密码的长度至少6个字符</p>";
  	  return false;
    } else if (password2.length>16) {
  	  s_password2.setAttribute("style","display:block");
      s_password2.innerHTML = "<p class='font_error'>密码的长度超过最大限制</p>";
  	  return false;
    } else if (password2 != password1) {
  	  s_password2.setAttribute("style","display:block");
      s_password2.innerHTML = "<p class='font_error'>两次密码不一致</p>";
  	  return false;
    }
	s_password2.setAttribute("style","display:none"); 
  	return true;
  }  
  
  
  function showUserError()  {
  	//4.提示信息
  	var s_username  = document.getElementById("s_username");  
  	var username = document.getElementById("username").value
    if (!username) {
  	  s_username.setAttribute("style","display:block");
      s_username.innerHTML = "<p class='font_error'>用户名不能为空</p>";
  	  return false;
    } else if (username.length<4 || username.length >13) {
  	  s_username.setAttribute("style","display:block");
      s_username.innerHTML = "<p class='font_error'>用户名长度应在4~12个字符之间</p>";
  	  return false;
    }
	
	/* console.log("开始")
	console.log(username)
	var message = ''
	$.ajax({
	    url: URL + "/user/selectUser",
	    type:"get",
	    data:{"name":username},
	    dataType:"json",
	    success:function(result){
			message = result.data
	    },
	})
	
	else if (message != null || message != ''){
		s_username.setAttribute("style","display:block");
		s_username.innerHTML = "<p class='font_error'>该账户已存在</p>";
		return false;
	} */
	
	s_username.setAttribute("style","display:none");
  	return true;
  }  
   
  /**
   * @description 密码明文密文切换
   */
  var conunt = 0
  var showPassWordInput = element => {
    function jugeTimes() {
	  if(conunt == 0){
		$(`.${element}`).attr('type', 'input')  
	  }else if (conunt % 2 == 1) {
        $(`.${element}`).attr('type', 'input')
      } else {
        $(`.${element}`).attr('type', 'password')
      }
    }
    jugeTimes()
    conunt++
  }
   
</script>

